<template>
  <div v-if="isVisible" class="modal-overlay">
    <div class="modal-container">
      <!-- 左上角注册按钮 -->
      <button class="register-button" @click="toggleMode">
        {{ isLoginMode ? '注册' : '登录' }}
      </button>
      <!-- 右上角关闭按钮 -->
      <button class="close-button" @click="closeModal">×</button>

      <div class="modal-content">
        <transition name="fade">
          <div v-if="isLoginMode" key="login" class="content">
            <h2 class="modal-title">登录到您的账户</h2>
            <form @submit.prevent="handleLogin">
              <div class="form-group">
                <label for="username">用户名</label>
                <input
                  id="username"
                  v-model="username"
                  type="text"
                  placeholder="请输入用户名"
                  required
                />
              </div>
              <div class="form-group">
                <label for="password">密码</label>
                <input
                  id="password"
                  v-model="password"
                  type="password"
                  placeholder="请输入密码"
                  required
                />
              </div>
              <div class="form-actions">
                <button type="submit" class="btn btn-primary">登录</button>
              </div>
            </form>
          </div>

          <div v-else key="register" class="content">
            <h2 class="modal-title">注册新账户</h2>
            <form @submit.prevent="handleRegister">
              <div class="form-group">
                <label for="email">邮箱</label>
                <input
                  id="email"
                  v-model="email"
                  type="email"
                  placeholder="请输入邮箱"
                  required
                />
              </div>
              <div class="form-group">
                <label for="new-username">用户名</label>
                <input
                  id="new-username"
                  v-model="newUsername"
                  type="text"
                  placeholder="请输入用户名"
                  required
                />
              </div>
              <div class="form-group">
                <label for="new-password">密码</label>
                <input
                  id="new-password"
                  v-model="newPassword"
                  type="password"
                  placeholder="请输入密码"
                  required
                />
              </div>
              <div class="form-group">
                <label for="confirm-password">确认密码</label>
                <input
                  id="confirm-password"
                  v-model="confirmPassword"
                  type="password"
                  placeholder="请再次输入密码"
                  required
                />
              </div>
              <div class="form-actions">
                <button type="submit" class="btn btn-primary">注册</button>
              </div>
            </form>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { reqLogin, reqRegister } from '../api/user';

const props = defineProps({
  isVisible: Boolean,
});

const emits = defineEmits(['close', 'login', 'register']);

const isLoginMode = ref(true); // 控制登录和注册模式
const username = ref('');
const password = ref('');
const email = ref(''); // 新增邮箱字段
const newUsername = ref('');
const newPassword = ref('');
const confirmPassword = ref('');

const handleLogin = async () => {
  try {
    if (!username.value || !password.value) {
      alert('用户名和密码不能为空！');
      return;
    }
    const response = await reqLogin(username.value, password.value);
    if (response.status === 200) {
      // console.log(response)
      // console.log('LoginModal - 登录成功，发送用户数据:', {
      //   email: response.data.data.email,
      // });
      emits('login', {
        email: response.data.data.email,
        token: response.data.data.token,
      });
      closeModal();
    } else {
      alert(response.data.message || '登录失败，请重试！');
    }
  } catch (error) {
    // console.error('登录失败:', error);
    alert('登录失败，请检查您的网络或稍后重试！');
  }
};

const handleRegister = async () => {
  try {
    if (newPassword.value !== confirmPassword.value) {
      alert('两次输入的密码不一致！');
      return;
    }
    if (!email.value || !newUsername.value || !newPassword.value) {
      alert('请填写完整的注册信息！');
      return;
    }
    const response = await reqRegister(newUsername.value, newPassword.value);
    if (response.status === 200) {
      alert('注册成功！请登录。');
      toggleMode(); // 切换到登录模式
    } else {
      alert(response.data.message || '注册失败，请重试！');
    }
  } catch (error) {
    console.error('注册失败:', error);
    alert('注册失败，请检查您的网络或稍后重试！');
  }
};

const toggleMode = () => {
  isLoginMode.value = !isLoginMode.value;
};

const closeModal = () => {
  emits('close');
};
</script>

<style scoped>
/* 遮罩 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-container {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  width: 400px;
  height: 450px; /* 固定高度，避免切换时拉伸 */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  text-align: center;
  position: relative;
  animation: fadeIn 0.3s ease-out;
  overflow: hidden; /* 防止内容溢出 */
}

.modal-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.form-group {
  margin-bottom: 20px;
  text-align: left;
}

label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #555;
}

input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s;
}

input:focus {
  border-color: #007aff;
  outline: none;
  box-shadow: 0 0 4px rgba(0, 122, 255, 0.3);
}

.form-actions {
  margin-top: 20px;
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: background 0.2s, transform 0.1s;
}

.btn-primary {
  background: #007aff;
  color: #fff;
}

.btn-primary:hover {
  background: #005bb5;
  transform: scale(1.05);
}

/* 注册按钮 */
.register-button {
  position: absolute;
  top: 10px;
  left: 10px;
  background: transparent;
  border: none;
  color: #007aff;
  font-size: 14px;
  cursor: pointer;
  font-weight: bold;
  transition: color 0.2s;
}

.register-button:hover {
  color: #005bb5;
}

/* 关闭按钮 */
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  transition: color 0.2s;
}

.close-button:hover {
  color: #ff4d4f;
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s, transform 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scale(0.9);
}
</style>